<template>
  <div class="actionce">
    <el-tabs>
      <el-form :model="formInline" ref="formInline">
        <el-form-item label="发布日期">
          <el-date-picker
            v-model="formInline.value1"
            type="month"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="文章类别">

          <el-cascader
           v-model="info.value"
           :options="info"
           :props="{ expandTrigger: 'hover' }"
           @change="handleChange"></el-cascader>
         
        </el-form-item>
        <el-button class="active" @click="hement">搜索</el-button>
        <el-button class="accion" @click="hection">重置</el-button>
        <el-button
          class="el-icon-plus"
          
          @click="$router.push('/home/snippets')"
          >新增</el-button
        >
      </el-form>
      <el-table :data="formlist" style="width: 100%">
        <el-table-column label="文章名称" prop="title" width="300">
        </el-table-column>
        <el-table-column  prop="category.type" label="文章类别" width="200">
           <template v-slot="{row}">
              {{forminfodeet(row.category.type)}}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="发布者" width="200">
        </el-table-column>
        <el-table-column
          style="width: 20%"
          label="发布状态"
          prop="status"
        >
        <template v-slot="{ row }">
            <el-tag
              :type="row.status == 'Offline'? 'info' : 'success'"
            >
              {{ formatEmployees(row.status) }}
            </el-tag>
          </template>
   
        </el-table-column>
        <el-table-column prop="publishTime" label="发布时间" width="200">
          <template v-slot="{row}">
            {{ formdate(row.publishTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作"  
          fixed="right"
         width="200">
          <template v-slot="{ row }">
           <!-- <el-button type="text" size="small">
            <span v-if="row.status == 'Offline'" @click="hcxjin(row)">上架</span>
            <span v-else @click="cheng(row)" >下架</span>
           </el-button> -->
                <el-button class="const" type="text" size="small" @click="compile(row)"
              >编辑</el-button>
            <el-button class="const" type="text" size="small" @click="hdetailed(row,a)"
              >查看详细</el-button>
                <el-button class="const" type="text" size="small" @click="dijia(row)"
              >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="liyongxin"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="q.index"
        :page-size="5"
        layout="prev, pager, next, jumper"
      >
      </el-pagination>
    </el-tabs>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { fitment,addenche,addrolled,tailuo,addfit } from "@/api/roles";
import employeesConst from "@/constant/employees";
// 状态的
const hireTypeMap = {};
employeesConst.hireTypyees.forEach((item) => {
  hireTypeMap[item.status] = item.value;
});
// 分类的
const hireTypegtr = {};
employeesConst.hireTypgtr.forEach((item) => {
  hireTypegtr[item.type] = item.value;
});
export default {
  data() {
    return {
      a:'1',
      list:[],
      info:[],
        formlist: [],
      formInline: {
        value1: "",
        sg:''
      },
      q: {
        index: 1,
        size: 10,
        category: {
          channel: "",
          type: ""
       },
        startTime: "",
        endTime: "",
        title:''
      },
    };
  },
  created() {
    this.loaintellectual();
    this.loadechg()
  },
  methods: {
    async loaintellectual() {
      const res = await fitment(this.q);
      // console.log('753',res);
      this.formlist = res.data.data;
      // console.log(this.formlist);
      
      
    },
    async loadechg(){
    // 渲染分类
        const ress = await addfit()
        //  console.log('74',ress.data);
         this.list = JSON.parse(ress.data)
         console.log('74',this.list);
         for(let i =0; i < this.list.length; i++){
           this.info.push({label:this.list[i].name,value:this.list[i].data[0].data[0].category.channel})
           this.info[i].children=[]
          //  console.log(this.info);
           if(this.list[i].data[0].data.length>0){
             for(let j = 0; j < this.list[i].data[0].data.length; j++){
               this.info[i].children.push({label:this.list[i].data[0].data[j].name,value:this.list[i].data[0].data[j].category.type})
              // console.log('741');
            }
              }
          
         }
    },
    handleChange(value){
      this.q.category.type = value[1]
      // console.log(value);
    },
    filterTag(value, row) {
      return row.status === value;
    },
    // 上架
   async hcxjin(row){
      this.$confirm("您确认上架?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const params = new URLSearchParams(); // 创建URLSearchParams数据对象
          params.append("articleId", row.articleId); //
          const res = await addenche(params);
          this.loaintellectual();

          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success(res.msg);
        })
    },
    // 下架
    async cheng(row){
   this.$confirm("您确认下架?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const params = new URLSearchParams(); // 创建URLSearchParams数据对象
          params.append("articleId", row.articleId); //
          const res = await addrolled(params);
          this.loaintellectual();

          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success(res.msg);
        })
    },
    // 编辑
    compile(row){
         this.$router.push({
        path: "/home/snipngd",
        query: { row },
      });
    },
    // 删除
     dijia(row){
       this.$confirm("您确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const params = new URLSearchParams(); // 创建URLSearchParams数据对象
          params.append("articleId", row.articleId); //
          const res = await tailuo(params);
          this.loaintellectual();

          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success(res.msg);
        })
        .catch(() => {});
    },
    // 上下架状态
    formatEmployees(code){
     return hireTypeMap[code];
    },
    // 搜索
    hement(){
      if(this.q.category.type != ''){
        this.loaintellectual()
      }
  if(this.formInline.value1){
        let date = new Date(this.formInline.value1);
       let Yr = date.getFullYear()
      // this.timer.push(Yr)
       let Mn = date.getMonth()+1
      
      if(Mn<10){
        Mn="0"+Mn
      }

      // this.timer.push(Mn)
      // this.timer.push(My)
      this.formInline.value1 = Yr+'-'+Mn+'-'+'01'+" "+'00'+':'+'00'+':'+'00'
      this.formInline.sg = Yr+'-'+Mn+'-'+'31'+" "+'23'+':'+'59'+':'+'59'
      // this.form.value1 = this.timer.join('-') +''+''+'00'+':'+'00'+':'+'00'
        this.q.startTime = this.formInline.value1
        this.q.endTime = this.formInline.sg
  }
      this.loaintellectual()
    },
    // 重置
    hection(){
      this.q.index = 1
      this.q.category.type = ''
      this.info.value = ''
       this.formInline.value1 = ''
       this.q.startTime = ''
       this.formInline.sg = ''
        this.q.endTime = ''
       this.loaintellectual()
    },
    // 分类渲染
    forminfodeet(code){
    return hireTypegtr[code]
    },
    // 分页
    handleCurrentChange(index) {
      this.q.index = index;
      this.loaintellectual();
    },
    handleSizeChange(size) {
      this.q.size = size;
      this.loaintellectual();
    },
    // 发布时间
    formdate(data) {
      return dayjs(data).format("YYYY-MM-DD");
    },
  //  查看详细
    hdetailed(row,a) {
      this.$router.push({
        path: "/home/imagetext",
        query: { row,a },
      });
      
    },
  },
};
</script>

<style scoped>
.actionce {
  background-color: #fff;
  padding: 0px 0 0px 20px;
}
.el-form-item {
  display: inline-block;
  width: 300px;
}
.active {
     background: linear-gradient(90deg, #ff7144 0%, #ff7144 100%);
     border: 1px solid #ff7144;
  color: #fff;
}
.el-icon-plus {
  color: #ff7144;
  position: absolute;
  right: 5%;
  border: 1px solid #ff7144;
}
.el-icon-plus:hover {
  background-color: #fff;
}
.const {
  color: #ff7144;
}
.accion:hover {
  background-color: rgb(255, 248, 243);
  color: #ff7144;
  border: 1px solid rgb(255, 190, 132);
}
.accion:focus {
  background-color: rgb(255, 248, 243);
  color: #ff7144;
  border: 1px solid rgb(255, 190, 132);
}
.el-button--text {
  color: #ff7144;
}
</style>
